<template>
    <transition
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter"
            @before-leave="beforeLeave"
            @leave="leave"
            @after-leave="afterLeave"
    >
        <div v-show="bub" style="transition: all 1.6s linear">
            <transition
                    @before-enter="bub=true"
                    @before-leave="bub=false"
            >
                <slot></slot>
            </transition>
        </div>
    </transition>
</template>

<style scoped lang="stylus">
    .v-enter, .v-leave-to
        opacity: 1
        transform: translateY(200px) rotate(720deg)
    .v-enter-active, .v-leave-active
        transition: all 1.6s cubic-bezier(0, 2, 1, 1)
</style>

<script>
    export default {
        data(){return{
            bub: false,
        }},
        methods:{
            beforeEnter(el){
                console.log('before enter')
                el.style.transform='translateX(-300px)'
            },
            enter(el, done){
                console.log('enter')
                this.oo=document.body.offsetHeight
                el.style.transform='translateX(0)'
                el.addEventListener('transitionend', done)
            },
            afterEnter(el){
                console.log('after enter')
            },
            beforeLeave(el){
                el.style.display='none'
                console.log('before leave')
            },
            leave(el, done){
                console.log('leave')
                el.addEventListener('transitionend', done)
            },
            afterLeave(el){
                console.log('after leave')
            },
        }
    }
</script>